<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期格式转化</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.13/dayjs.min.js"></script> -->
    <script type="text/javascript" src="../../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h1>日期格式转化</h1>
        <!--计算属性实现-->
        <h2>现在是:{{ formatTime }}</h2>
        <!--methods实现-->
        <h2>现在是:{{ getFmtTime() }}</h2>

         <!--filters实现-->
         <h2>现在是:{{ time | getFmtTimeWithFilter}}</h2>

        <!--filters实现2-->
        <h2>现在是:{{ time | getFmtTimeWithFilter1}}</h2>

         <!--filters实现2传递参数-->
         <h2>现在是:{{ time | getFmtTimeWithFilter2('YYYY-MM-DD')}}</h2>

         <!--filters实现2传递参数-->
         <h2>现在是:{{ time | getFmtTimeWithFilter3()}}</h2>
        <!--filters实现过滤器链-->
        <h2>现在是:{{ time | getFmtTimeWithFilter2('YYYY-MM-DD') | myslience}}</h2>

        <h3 :x="msg | mySlice">你好,世界</h3> <!--v-bind也可使用filter-->

    </div>
    <div id="newRoot">
        <!--filters实现2传递参数-->
        <h2>现在是:{{ time | getFmtTimeWithFilter3()}}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        //注册全局过滤器，让两个VM都能发现
        Vue.filter('getFmtTimeWithFilter3',function(val,fmot='YYYY-MM-DD'){
            return dayjs(val).format(fmot)
        })

        new Vue({
            el: "#root",
            data:function(){
                return {
                    time: 1631808423062
                }
            },
            computed:{
                formatTime:{
                    get(){
                       return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                    } 
                }
            },
            methods:{
                getFmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            filters:{
                getFmtTimeWithFilter(){ //其val就是接受到通道符前面的参数time，如果不接受该参数，则默认传递当前系统的时间,即使dayjs(this.time)设置vue指定的时间戳，计算时还是会使用当前系统时间戳进行转化
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                },
                getFmtTimeWithFilter1(val){
                    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
                },
                getFmtTimeWithFilter2(val,fmot){
                    return dayjs(val).format(fmot)
                },
                // getFmtTimeWithFilter3(val,fmot='YYYY-MM-DD'){  //如果不传递的fmot参数，此处设置一个默认值
                //     return dayjs(val).format(fmot)
                // },
                myslience(val){  //此处的val就是上一个过滤器执行完成后return的值
                   return val.slice(0,4)
                }
            }
        })
        new Vue({
            el: "#newRoot",
            data:function(){
                return {
                    value: "helloworld",
                    time: 1631808423062
                }
            },
        })
    </script>
</body>
</html>